<!-- 车辆管理 -->
<template>
  <div class="dashboard-container operational-range customer-list-box">
    <div class="app-container">
      <!-- header -->
      <el-card
        class="search-card-box"
        shadow="never"
      >
        <el-form
          ref="queryparmasRef"
          :model="queryparmas"
          label-width="95px"
        >
          <el-row :gutter="60">
            <el-col :span="8">
              <el-form-item
                prop="account"
                label="司机账号:"
                style="margin-bottom: 0px"
              >
                <el-input
                  v-model="queryparmas.account"
                  clearable
                  placeholder="请输入司机账号"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                prop="name"
                label="司机姓名:"
                style="margin-bottom: 0px"
              >
                <el-input
                  v-model="queryparmas.name"
                  clearable
                  placeholder="请输入司机姓名"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                prop="mobile"
                label="司机手机号:"
                style="margin-bottom: 0px"
                label-width="110px"
              >
                <el-input
                  v-model="queryparmas.phone"
                  clearable
                  placeholder="请输入司机手机"
                />
              </el-form-item>
            </el-col>
            <!-- 树形 -->
            <el-col :span="8">
              <el-form-item
                prop="data"
                label="所属机构:"
                style="margin-top: 20px; margin-bottom: 0px"
              >
                <Treeselect
                  v-model="queryparmas.agentId"
                  :options="treeList"
                  :normalizer="defaultProps"
                  :searchable="true"
                  placeholder="请选择所属机构"
                />
                <img
                  ref="arrow"
                  src="../../assets/pullDown.png"
                  class="downArrow"
                />
              </el-form-item>
            </el-col>
            <!-- 按钮 -->
            <el-col
              :span="8"
              style="margin-top: 20px"
            >
              <el-button
                type="warning"
                @click="searchBtn"
              >搜索</el-button>
              <el-button
                plain
                class="reset-btn"
                @click="resetBtn"
              >重置</el-button>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
      <!-- main -->
      <div style="margin-top: 20px">
        <el-card
          class="table-card-box"
          shadow="never"
        >
          <!-- 表格 -->
          <el-table
            :data="formData"
            style="width: 100%"
            stripe
          >
            <el-card
              slot="empty"
              class="table-empty-box"
              shadow="never"
            >
            </el-card>
            <!-- 序号 -->
            <el-table-column
              align="left"
              type="index"
              :index="indexMethod"
              label="序号"
              width="100px"
            >
            </el-table-column>
            <!-- 账号 -->
            <el-table-column
              prop="account"
              align="left"
              label="司机账号"
              min-width="200px"
            >
              <template v-slot="{ row }">
                <span>{{ row.account }}</span>
              </template>
            </el-table-column>
            <!-- 姓名 -->
            <el-table-column
              prop="name"
              align="left"
              label="司机姓名"
              min-width="300px"
            >
              <template v-slot="{ row }">
                <span>{{ row.name }}</span>
              </template>
            </el-table-column>
            <!-- 手机号 -->
            <el-table-column
              prop="mobile"
              align="left"
              label="司机手机号"
              min-width="250px"
            >
              <template v-slot="{ row }">
                <span>{{ row.mobile }}</span>
              </template>
            </el-table-column>
            <!-- 所属机构 -->
            <el-table-column
              prop="agency"
              align="left"
              label="所属机构"
              min-width="300px"
            >
              <template v-slot="{ row }">
                <span>{{ row.agency.name }}</span>
              </template>
            </el-table-column>
            <!-- 工作状态 -->
            <el-table-column
              prop="workStatus"
              align="center"
              label="工作状态"
              min-width="230px"
            >
              <template v-slot="{ row }">
                <div
                  class="workStatus"
                  :style="{
                    'background-color': row.workStatus === 0 ? 'red' : 'green'
                  }"
                ></div>
                <span>{{ row.workStatus === 0 ? '休息' : '上班' }}</span>
              </template>
            </el-table-column>
            <!-- 操作按钮 -->
            <el-table-column
              align="center"
              label="操作"
              width="120px"
              class-name="small-padding fixed-width"
              fixed="right"
            >
              <template v-slot="{ row }">
                <el-link
                  type="primary"
                  :underline="false"
                  @click="driverDetailBtn(row.userId)"
                >查看</el-link>
                |
                <el-link
                  type="primary"
                  :underline="false"
                  @click="carDialog(row.id)"
                >配置车辆</el-link>
              </template>
            </el-table-column>
          </el-table>

          <!-- 分页组件 -->
          <div class="pagination">
            <el-pagination
              :current-page="queryparmas.page"
              :page-sizes="[5, 10, 15, 20]"
              :page-size="queryparmas.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="parseInt(queryparmas.counts)"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            >
            </el-pagination>
          </div>
        </el-card>
      </div>
    </div>
    <el-dialog
      title="车辆配置"
      :visible.sync="infoCarShow"
      width="50%"
      :close="handleClose"
    >
      <span
        style="font-size:15px;line-height:35px"
      >配置车辆满足以下条件：</span>
      <el-row :gutter="20">
        <el-col
          :span="15"
          :offset="4"
        >
          <el-row><span style="line-height:35px">1.司机信息已完善</span></el-row>
          <el-row><span style="line-height:35px">2.司机已设置排班</span></el-row>
          <el-row><span
            style="line-height:35px"
          >3.司机绑定车辆未在启用状态</span></el-row>
        </el-col>
      </el-row>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          class="cancel-btn"
          @click="cancelBtn"
        >取消</el-button>
        <el-button
          type="primary"
          class="save-btn"
          @click="btnOK"
        >确定</el-button>
      </span>
    </el-dialog>
    <carConfig :is-show.sync="isShow"></carConfig>
  </div>
</template>

<script>
import { driverList, driverDetail, truckTypeDetail } from '@/api/transit' // 首页数据
import { agencyList } from '@/api/institutions' // 树形数据
// vue中的树形组件导入
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import carConfig from './components/car-config.vue'
export default {
  name: 'Courses',
  components: { Treeselect, carConfig },
  data() {
    return {
      formData: [], // 页面分页
      // 分页组件
      queryparmas: {
        page: 1,
        pageSize: 5,
        counts: '',
        account: '',
        name: '',
        phone: '',
        agentId: null
      },
      treeList: [], // 树状机构
      defaultProps(node) {
        return {
          id: node.id,
          children: node.children,
          label: node.name
        }
      },
      id: null, // 点击详情页传递id
      detailId: '',
      infoCarShow: false,
      isShow: false // 控制弹窗的显示与隐藏
    }
  },
  created() {
    this.getDriverList()
    this.getAgencyList()
  },
  methods: {
    // 获取页面分页数据
    async getDriverList() {
      const { data } = await driverList(this.queryparmas)
      this.queryparmas.page = data.page // 当前页
      this.queryparmas.pageSize = data.pageSize // 每页数量
      this.queryparmas.counts = data.counts // 总条数
      this.formData = data.items // 列表数据
      // console.log(res)
    },
    // 分页组件每页数量
    handleSizeChange(newVal) {
      this.queryparmas.pageSize = newVal
      this.getDriverList()
    },
    // 分页组件改变页数
    handleCurrentChange(newVal) {
      this.queryparmas.page = newVal
      this.getDriverList()
    },
    // 获取树状机构
    async getAgencyList() {
      const { data } = await agencyList()
      this.treeList = JSON.parse(data)
    },
    // 搜索按钮
    searchBtn() {
      this.queryparmas.page = 1
      this.getDriverList(this.queryparmas)
    },
    // 重置按钮
    resetBtn() {
      this.$refs.queryparmasRef.resetFields()
      this.queryparmas.account = ''
      this.queryparmas.name = ''
      this.queryparmas.phone = ''
      this.queryparmas.agentId = null
      this.getDriverList()
    },
    // 序号
    indexMethod(index) {
      return (this.queryparmas.page - 1) * this.queryparmas.pageSize + index + 1
    },
    // 点击进入详情页
    driverDetailBtn(id) {
      this.$router.push({
        path: `driver-detail/?id=${id}`
        // path: `/transit/driver-detail`,
        // query: {
        //   id: id,
        //   type: '司机管理'
        // }
      })
    },
    // 点击打卡弹窗
    carDialog(id) {
      this.infoCarShow = true
      this.detailId = id
      this.truckTypeDetail()
    },
    // 提示框取消按钮
    cancelBtn() {
      this.infoCarShow = false
      this.$message('已取消')
    },
    // 提示框确定按钮
    btnOK() {
      this.infoCarShow = false
      this.isShow = true
    },
    // 弹窗关闭
    handleClose() {
      this.infoCarShow = false
    },
    // 调用详情接口
    async getDriverDetail() {
      const res = await driverDetail(this.detailId)
      console.log(111, res)
    },
    async truckTypeDetail() {
      const res = await truckTypeDetail(this.detailId)
      console.log(222, res)
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.alert {
  margin: 10px 0px;
}
.pagination {
  margin-top: 40px;
}
</style>

<style lang="scss" scoped>
.operational-range {
  .el-card {
    overflow: initial;
  }
}
.downArrow {
  position: absolute;
  width: 20px;
  right: 5px;
  top: 12px;
  pointer-events: none;
}
.workStatus {
  position: absolute;
  border-radius: 50%;
  width: 8px;
  height: 8px;
  left: 90px;
  bottom: 20px;
}
.save-btn {
  background-color: #e15536;
  border: 1px solid #e15536;
}
.save-btn:hover {
  border: none !important;
}
.cancel-btn {
  // width: 56px;
  color: #2a2929;
  border: 1px solid #d8dde3;
  &:hover {
    background: #ffeeeb;
    border: 1px solid #f3917c;
    color: #e15536;
  }
}
</style>
